import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import AddOne from './AddOne.vue'
import UpdateOne from './UpdateOne.vue'
import { goodService, goodClassifyService } from '../../services'
import { handleResult, formateTimestamp } from '../../helpers/utils'
import { message, Modal, Input } from 'ant-design-vue'

export default defineComponent({
  components: {
    AddOne,
    UpdateOne
  },
  props: {
    simple: Boolean
  },
  setup (props) {
    const router = useRouter()

    /** 获取商品列表 */
    const getGoodlist = async () => {
      const res = await goodService.getGoodlist(
        curPage.value,
        pageSize.value,
        keyword.value
      )
      handleResult(res).success(({ data }) => {
        goodlist.value = data.list
        total.value = data.total
        goodlist.value.forEach(item => (item.key = item._id))
      })
    }

    const classifyList = ref([])
    /** 获取商品分类 */
    const getClassify = async () => {
      const res = await goodClassifyService.getlist(1, 30)
      handleResult(res).success(({ data: { list } }) => {
        classifyList.value = list
      })
    }

    onMounted(async () => {
      getGoodlist()
    })

    const addOneVisible = ref(false)
    const updateOneVisible = ref(false)

    // =================== 商品表格相关数据及业务 begin =================== //
    /** 商品表格数据 */
    const goodlist = ref([])
    /** 当前表格页码 */
    const curPage = ref(1)
    /** 每页条数 */
    const pageSize = ref(3)
    /** 当前所有表格数据条数 */
    const total = ref(0)
    /** 搜索框关键词 */
    const keyword = ref('')
    /** 商品表格配置项 */
    const columns = [
      {
        title: '商品名称',
        dataIndex: 'name'
      },
      {
        title: '商品价格',
        dataIndex: 'price'
      },
      {
        title: '商家',
        dataIndex: 'merchant'
      },
      {
        title: '发布时间',
        slots: {
          customRender: 'publishDate'
        }
      },
      {
        title: '商品分类',
        dataIndex: 'classify'
      },
      {
        title: '库存',
        slots: {
          customRender: 'count'
        }
      }
    ]
    if (!props.simple) {
      columns.push({
        title: '操作',
        slots: {
          customRender: 'operation'
        }
      })
    }

    /** 设置当前页码 */
    const setPage = page => {
      curPage.value = page
      getGoodlist()
    }
    // ==================== 商品表格相关数据及业务 end ==================== //

    /** 搜索事件 */
    const onSearch = () => {
      keyword.value === ''
        ? (isCleared.value = false)
        : (isCleared.value = true)
      getGoodlist()
    }

    /** 清除按钮显示？ */
    const isCleared = ref(false)
    /** 清除事件 */
    const onClear = () => {
      keyword.value = ''
      isCleared.value = false
      getGoodlist()
    }

    // =================== 操作相关业务 begin =================== //
    /** 删除商品 */
    const delGood = async goodId => {
      const res = await goodService.delGood(goodId)
      handleResult(res).success(({ msg }) => {
        message.success(msg)
        getGoodlist()
      })
    }

    /** 当前编辑的商品 */
    const curEditGood = ref({})

    /** 编辑商品 */
    const updateGood = record => {
      curEditGood.value = record
      updateOneVisible.value = true
    }

    /** 更新商品后更新列表视图 */
    const updateGoodView = newData => {
      Object.assign(curEditGood.value, newData)
    }

    const COUNT_TYPE = {
      IN: 'IN',
      OUT: 'OUT'
    }

    /** 出库入库处理函数 */
    const editCount = (type, goodId) => {
      const curType = type === COUNT_TYPE.IN ? '入库' : '出库'
      Modal.confirm({
        title: `请输入 ${curType} 数量`,
        content: (
          <div>
            <Input class="input_count" />
          </div>
        ),
        /** 确认事件 */
        onOk: async () => {
          const el = document.querySelector('.input_count')
          const res = await goodService.updateCount(goodId, type, el.value)
          handleResult(res).success(({ msg }) => {
            message.success(msg)
            getGoodlist()
          })
        }
      })
    }

    /** 跳转到详情页 */
    const toDetail = goodId => {
      router.push(`/goods/${goodId}`)
    }
    // ==================== 操作相关业务 end ==================== //

    return {
      goodlist,
      columns,
      curPage,
      pageSize,
      total,
      setPage,
      keyword,
      addOneVisible,
      onSearch,
      isCleared,
      onClear,
      delGood,
      editCount,
      formateTimestamp,
      updateOneVisible,
      updateGood,
      curEditGood,
      updateGoodView,
      toDetail,
      getClassify,
      classifyList,
      isSimple: props.simple
    }
  }
})
